<!--
 * @Description: * 在线充值
 * @Date: 2021-01-04 21:02:35
 * @LastEditTime: 2021-01-04 22:19:37
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/components/recharge.vue
-->
<template>
   <div class="recharge">
       <Row>
            <Col span="4" class="vip_1">账户余额</Col>
            <Col span="20" class="vip_2">0.00 元</Col>
        </Row>
         <Row>
            <Col span="4" class="vip_1">充值金额</Col>
            <Col span="20" class="vip_2">
            <InputNumber size="small" :max="1000" :min="1" v-model="value1"></InputNumber>
            </Col>
        </Row>
         <Row>
            <Col span="4" class="vip_1">付款方式</Col>
            <Col span="20" class="vip_2">
             <RadioGroup v-model="phone">
        <Radio label="apple">
            <Icon type="logo-apple"></Icon>
            <span>Apple</span>
        </Radio>
        <Radio label="android">
            <Icon type="logo-android"></Icon>
            <span>Android</span>
        </Radio>
        <Radio label="windows">
            <Icon type="logo-windows"></Icon>
            <span>Windows</span>
        </Radio>
    </RadioGroup>
            </Col>
        </Row>
         <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                <Button type="primary" shape="circle" icon="ios-search">立即充值</Button>
            </Col>
        </Row>
         <Row style="margin-top: 40px;">
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2" style="font-weight: 600;" >
                充值说明：
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                1、本站正式开通24小时自助充值通道，付款秒到账！
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                2、若付款后，资金没有到账；请联系QQ客服，帮您处理！
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                3、若无法付款，请联系QQ客服添加微信或支付宝进行转账！
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                4、充值时有任何疑问，请联系我们QQ客服！
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                QQ客服：531336711
            </Col>
        </Row>
        <Row>
            <Col span="4" class="vip_1"></Col>
            <Col span="20" class="vip_2">
                QQ邮箱：531336711@qq.com
            </Col>
        </Row>
   </div>
</template>
<script>
   export default { 
      name: "recharge",
      components: {},
      data() {
         return {
             phone: 'apple',
             value1: 100
         }
      },
      computed: {},
      mounted: function() {},
      methods: {
      }
   }
</script>
<style lang="scss">
.recharge{
  padding-top: 50px;
  padding-bottom: 90px;
  .vip_1{
      text-align: right;
      padding-bottom: 15px;
  }
  .vip_2{
      text-align: left;
      padding-left: 30px;
      padding-bottom: 15px;
  }
}
</style>